<template>
        <div>
            <div class="modal-header">
                <h4 class="modal-title">{{$t('m.sUI')}}</h4>
            </div>
            <div class="modal-body">
                <Tabs value="name1">
                    <TabPane v-bind:label="$t('m.information')" name="name1">
                        <div class="list js-identify-list"  id="identify_person_list">
                            <h4>{{$t('m.information')}}</h4>
                            <ul>
                                <li>
                                    <span>{{$t('m.userName')}}：</span>{{userIdentiInfo.fullName}}
                                </li>
                                <li><span>{{$t('m.phone')}}：</span>{{userIdentiInfo.phone}}</li>
                                <li><span>gender：</span>{{userIdentiInfo2.gender}}</li>
                                <li><span>email：</span>{{userIdentiInfo.email}}</li>
                                <li><span>{{$t('m.in')}}：</span>{{userIdentiInfo2.idNumber}}&nbsp;<span style="color: red;">公用</span> 人</li>
                                <li><span>birthday：</span>{{userIdentiInfo2.birthday}}</li>
                                <li><span>{{$t('m.hE')}}：</span>{{userIdentiInfo2.educationLevel}}</li>
                                <li><span>{{$t('m.ms')}}：</span>{{userIdentiInfo2.maritalStatus}}</li>
                                <li><span>Number of children：</span>{{userIdentiInfo2.childrenNumber}}</li>
                                <li><span>{{$t('m.ha')}}：</span>{{userIdentiInfo2.address}}</li>
                                <li><span>{{$t('m.dn')}}：</span>{{userIdentiInfo2.addressDetail}}</li>
                                <li><span>{{$t('m.nowAddTime')}}：</span>{{userIdentiInfo2.residenceDuration}}</li>
                                <li><span><Icon type="ios-chatbubbles" />Line：</span>{{userIdentiInfo2.socialLine}}</li>
                                <li><span><Icon type="logo-facebook" />Facebook：</span>{{userIdentiInfo2.socialFacebook}}</li>
                                <li><span>Zalo：</span>{{userIdentiInfo2.socialZalo}}</li>
                                <li><span><Icon type="ios-call" />Skype：</span>{{userIdentiInfo2.socialSkype}}</li>
                                <li><span><Icon type="logo-instagram" />Instagram：</span>{{userIdentiInfo2.socialIns}}</li>
                                <li><span>Viber：</span>{{userIdentiInfo2.socialViber}}</li>
                                <li><span>Other：</span>{{userIdentiInfo2.socialOther}}</li>
                            </ul>
                            <!--                  <h4>活体信息</h4>-->
                            <!--									<li><span>人像匹配度：</span>{{userIdentiInfo2.faceConfidence}}</li>-->
                            <!--									<li><span>人像搜索结果：</span>{{userIdentiInfo2.faceResult}}</li>-->
                            <!--                  <br>-->
                            <!--                  <br>-->
                            <!--								<h4>风控信息</h4>-->
                            <!--						      <i-table :columns="columns11" :data="data11"></i-table>-->
                            <!--                  <br>-->
                            <!--                  <i-table :columns="columns22" :data="data22"></i-table>-->



                            <!--										<div id="paymentLip"></div>-->
                        </div>
                    </TabPane>
                    <TabPane v-bind:label="$t('m.AR')" name="name2">
                        <div class="list js-identify-list" id="identify_relation_list">
                            <h4>{{contactInfo.firstContactTypeName}}{{$t('m.ralatives')}}</h4>
                            <ul>
                                <li><span>{{contactInfo.firstContactTypeName}}Name：</span>{{userIdentiInfo2.contactRelativeFullname}}</li>
                                <li>
                                    <span>{{contactInfo.firstContactTypeName}}Relatives:</span>{{userIdentiInfo2.contactRelativeRelationship}}
                                    <!--									<a href="javascript:;"><span style="color: red;">出现次数:</span>{{contactInfo.firstContactCellphoneCount}}</a>-->
                                </li>
                                <li><span>{{contactInfo.firstContactTypeName}}{{$t('m.ralativesAN')}}：</span>{{userIdentiInfo2.contactRelativeAreacode}}</li>
                                <li><span>{{$t('m.phone')}}：</span>{{userIdentiInfo2.contactRelativePhone}}</li>
                                <!--								<li class="w100"><span>{{contactInfo.firstContactTypeName}}电话与通讯录比对结果：</span><span id="pyFatherphoneComparison"></span></li>-->
                                <!--								<li class="w100"><span>父亲关键词提取结果：</span><span id="paymentFatherKeyWord"></span></li>-->
                                <!--								<li class="w100"><span>母亲关键词提取结果：</span><span id="paymentMotherKeyWord"></span></li></ul>-->
                            </ul>
                            <h4>{{contactInfo.secondContactTypeName}}{{$t('m.frienR')}}</h4>
                            <ul>
                                <li><span>{{contactInfo.secondContactTypeName}}Name：</span>{{userIdentiInfo2.contactFriendFullname}}</li>
                                <li>
                                    <span>{{contactInfo.secondContactTypeName}}{{$t('m.frienR')}}:</span>{{userIdentiInfo2.contactFriendRelationship}}
                                    <!--										<a href="javascript:;"><span style="color: red;"></span>出现次数：{{contactInfo.secondContactCellphoneCount}}</a>-->
                                </li>
                                <li><span>{{contactInfo.firstContactTypeName}}{{$t('m.frienAN')}}：</span>{{userIdentiInfo2.contactFriendAreacode}}</li>
                                <li><span>电话：</span>{{userIdentiInfo2.contactFriendPhone}}</li>
                                <!--									<li class="w100">-->
                                <!--&lt;!&ndash;										<span>{{contactInfo.secondContactTypeName}}</span>电话与通讯录比对结果：</span>&ndash;&gt;-->
                                <!--										<span id="pyMotherphoneComparison"></span>-->
                                <!--									</li>-->
                            </ul>
                            <!--								<h4>电核信息</h4>-->
                            <!--                  <ul>-->
                            <!--								<li><span style="color:red;">*</span><span>{{contactInfo.firstContactTypeName}}核实身份：</span></li>-->
                            <!--								<li class="w65"><input type="radio" name="isRealFather" id="isRealFather_1" value="1" />是  <input type="radio" class="ml20" name="isRealFather" id="isRealFather_0" value="0"  />否  <input type="radio" class="ml20" name="isRealFather" id="isRealFather_2" value="2" />存疑</li>-->
                            <!--								<li><span style="color:red;">*</span><span>{{contactInfo.secondContactTypeName}}核实身份：</span></li>-->
                            <!--								<li class="w65"><input type="radio" name="isRealMother" id="isRealMother_1" value="1" />是  <input type="radio" class="ml20" name="isRealMother" id="isRealMother_0" value="0"  />否  <input type="radio" class="ml20" name="isRealMother" id="isRealMother_2" value="2" />存疑</li>-->
                            <!--								<li><span style="color:red;">*</span><span>{{contactInfo.firstContactTypeName}}通讯工具/软件可查？</span></li>-->
                            <!--								<li class="w65"><input type="radio" name="fatherConnectToolIsCheck" id="fatherConnectToolIsCheck_1" value="1"  />是  <input type="radio" class="ml20" name="fatherConnectToolIsCheck" id="fatherConnectToolIsCheck_0" value="0" />否</li>-->
                            <!--								<li class="w100"><input type="text" id="fatherConnectToolRemark" class="form-control"  placeholder="若可查,备注微信或者支付宝相关信息" /></li>-->
                            <!--								<li><span style="color:red;">*</span><span>{{contactInfo.secondContactTypeName}}通讯工具/软件可查？</span></li>-->
                            <!--								<li class="w65"><input type="radio" name="motherConnectToolIsCheck" id="motherConnectToolIsCheck_1" value="1"  />是  <input type="radio" class="ml20" name="motherConnectToolIsCheck" id="motherConnectToolIsCheck_0" value="0"  />否</li>-->
                            <!--								<li class="w100"><input type="text" id="motherConnectToolRemark" class="form-control"  placeholder="若可查,备注微信或者支付宝相关信息" /></li>-->
                            <!--								<div class="appeartimee" id="appeartime_1"></div></ul>-->
                        </div>
                    </TabPane>
                    <TabPane v-bind:label="$t('m.bankInfo')">
                        <Row :gutter="20">
                            <Col style="margin-bottom: 20px;" span="12" v-for="item in bankinfo" :key="index">
                                <Card>
                                    <p slot="title">
                                        <Icon type="ios-card-outline"></Icon>
                                        {{$t('m.Bcardi')}}
                                    </p>
                                    <ul>
                                        <li>{{$t('m.Bname')}}：{{item.bankName}}</li>
                                        <li>{{$t('m.BcardN')}}：{{item.accountNo}}</li>
                                        <li>{{$t('m.creatBN')}}：{{item.accountName}}</li>
                                        <li>{{$t('m.banktype')}}：{{item.accountType}}</li>
                                    </ul>
                                </Card>

                            </Col>
                        </Row>

                    </TabPane>
                    <TabPane v-bind:label="$t('m.picInfo')" name="name3">
                        <div class="list picInfo"  id="identify_photo_list">
                            <li class="picInfoLi">
                                <a :href="userIdentiInfo2.idcardFrontUrl" target="_blank"><img id="img1" :src="userIdentiInfo2.idcardFrontUrl"></a>
                                <p>{{$t('m.frontIc')}}</p>
                                <span><Button  size="small" @click="zhuan('img1')" class="zhuanzhuan">点击旋转</Button></span>


                            </li>
                            <li class="picInfoLi">
                                <a :href="userIdentiInfo2.idcardBackUrl" target="_blank"><img id="img2" :src="userIdentiInfo2.idcardBackUrl"></a>
                                <p>{{$t('m.backIc')}}</p>
                                <span><Button size="small" @click="zhuan('img2')" class="zhuanzhuan">点击旋转</Button></span>
                            </li>
                            <li class="picInfoLi">
                                <a :href="userIdentiInfo2.faceSnapshotUrl" target="_blank"><img id="img3" :src="userIdentiInfo2.faceSnapshotUrl"></a>
                                <p>{{$t('m.Bphoto')}}</p>
                                <span><Button size="small" @click="zhuan('img3')" class="zhuanzhuan">点击旋转</Button></span>
                            </li>

                        </div>
                        <!--                                照片旋转-->
                        <div style="width: 100%">
                            <p>
                                Remark Photo
                            </p>
                            <li class="picInfoLi" v-for="(item,index) in userIdentiInfo3">
                                <a :href="userIdentiInfo2.idcardFrontUrl" target="_blank">
                                    <img :src="item.imgUrl" :id="index">
                                </a>
                                <span><Button size="small" @click="zhuan(index)" class="zhuanzhuan">点击旋转</Button></span>
                            </li>
                        </div>
                    </TabPane>
                    <TabPane v-bind:label="$t('m.CallLog')" name="name6">
                        <div class="list js-identify-list"  style="height: 700px !important;overflow: auto;">
                            <table class="table table-hover table-condensed">
                                <thead><tr>
                                    <td>{{$t('m.userName')}}</td>
                                    <td>{{$t('m.phone')}}</td>
                                </tr></thead>
                                <tr v-for="item in callLog">
                                    <td>{{item.name}}</td>
                                    <td>{{item.phone}}</td>
                                </tr>
                            </table>
                        </div>
                    </TabPane>
                    <TabPane label="Misc" name="name7">
                        <table class="table table-hover table-condensed">
                            <thead>
                            <tr>
                                <td>
                                    Create Time
                                </td>
                                <td>
                                    Remark
                                </td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in userIdentiInfo3" :key="index">
                                <td>
                                    {{item.ctime}}
                                </td>
                                <td>
                                    {{item.remark}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </TabPane>
                    <TabPane label="工作信息">
                        <div class="list js-identify-list"  id="identify_person_list">
                            <h4>工作信息</h4>

                            <li><span>工作地址：</span>{{userIdentiInfo2.workAddress}}</li>
                            <li><span>公司名称：</span>{{userIdentiInfo2.companyName}}</li>
                            <li><span>公司电话 ：</span>{{userIdentiInfo2.officePhone}}</li>
                            <br>
                            <!--                  <li><span>工作证明：</span>{{userIdentiInfo2.workEvidenceUrl}}</li>-->




                        </div>

                    </TabPane>
                </Tabs>
            </div>

        </div>

</template>

<script>

export default {
  name: 'identifyInfos',
    data() {
        const isEqual = (rule, value, callback) => {
            const { newPassword } = this.passForm;
            if (value !== newPassword) return callback(new Error('两次输入的密码不一致'));
            callback();
        }
        return {
            deg: 0,
            zhuand:0,
            columns11: [
                {
                    title: '手机厂商',
                    key: 'deviceModel'
                },
                {
                    title: '手机型号',
                    key: 'osVersion'
                },
                {
                    title: '设备id',
                    key: 'deviceNumber'
                }
            ],

            columns22: [
                {
                    title: '公用的身份证手机号',
                    key: 'creadId'
                },
            ],
            data22: [
                {
                    creadId: 'Pro-30T',

                },
            ],
            // ----------
            useriii:'',
            ordercol: [
                {
                    title:this.$t('m.OrderGid'),
                    key: 'orderGid'
                },
                {
                    title:this.$t('m.LoanDate'),
                    key: 'orderTime'
                },
                {
                    title: this.$t('m.LoanAmount'),
                    key: 'loanAmount'
                },
                {
                    title: this.$t('m.LoanDay'),
                    key: 'PaybackDate'
                },
                {
                    title: this.$t('m.PaybackDate'),
                    key: 'dueDay'
                },
                {
                    title: this.$t('m.ServiceCharge'),
                    key: 'serviceFee'
                },
                {
                    title: this.$t('m.Interest'),
                    key: 'interest'
                },
                {
                    title: this.$t('m.InterestPenalties'),
                    key: 'interestFine'
                },
                {
                    title:  this.$t('m.TransferStatus'),
                    key: 'statusLoan'
                }
            ],
            // deviceModel:'1',
            // platform:'1',
            // osVersion:'1',

            orderlist:false,
            btnLoading: false,
            bankinfo:[],
            name:'',
            phone:'',
            hasIdentified:'',
            id:'',
            loanCount: 0,
            userListByCondition:[],//用户列表
            userCreditOrdersList:[],//借款笔数
            userYuqiCreditOrdersList:{},//逾期查询
            platformList:[],
            reqId:'',
            hasIdentifiedArr:['未提交申请','申请成功','人工审核中','机审不通过','人工审核不通过','驳回','资料提交中'],
            platformId: -1,
            loanStateArr:['待审核','待打款','审核失败','已打款','不打款'],
            isYuqi:'',
            isFreeze: '',
            limitMoney:-1,
            blackStatus: -1,
            beginDate:'',
            endDate:'',
            beginPassDate:'',
            endPassDate:'',
            modalType:0,
            loan_list_size: 0,
            loan_list_page: 1,
            loading: true,
            setModal:false,
            tabState: 'adduserInfo',
            modalId:'',
            modalFreeze: '',
            adminType:sessionStorage.roles,
            level:sessionStorage.level,
            orderId:'',
            identifyList:[],
            //baseinfo

            //creditinfo
            submitMessage:'',
            money:500,
            inputMoney:'',
            collapseModel:'',
            picInfo:{},
            remarkInfo:{},
            checkLogList:[],//通话记录
            checkStateObject : {
                "-1": "开始接单",
                "12": "挂起",
                "3": "继续审核",
                "7": "成功",
                "6": "否单",
                "5": "驳回",
                "-2": "发回池里",
                "-9": "旧审核日志"
            },
            mobileInfo: {
                emergency:[],
                monthly:[],
                contacts_overdue:[],
                single_overdue:[],
                user_portrait:{
                    contacts_distribution:{},
                    silent_days:{},
                    night_activities:{}
                },
                special_cate:[]
            },
            page: 1,
            pageSize: 10,
            investorId: -1,
            investorList: [],
            loanProductNo: 'all',
            loanProductNoList: [],
            curIdentified: '', // 当前选中的item，hasIdentified
            curBlackStatus: '', // 当前选中的item, blackStatus
            curLoanProductNoList: '', // 当前产品配置list
            productForm: {
                loanProductNo: ''
            },
            productRules: {
                loanProductNo: [
                    { required: true, message: '请选择产品', trigger: 'change' }
                ]
            },
            adduserInfo:{
                remark:'',
                info:'',
                uploadLists:[]
            },
            uploadList: [],
            uploadStatus: '',
            uploadPending: false,
            uploadPercent: 0,
            previewProofImgs: false, // 详情查看凭证弹窗
            proofImgsArr: [], // 详情查看凭证图片数组
            addRules: {
                remark: [
                    { required: true, message: 'remark can not be empty', trigger: 'blur' }
                ],
                uploadLists: [
                    { required: true, type: 'array', min:1, message: '请上传还款凭证', trigger: 'change' }
                ],
            },
            orderData:[]
        }
    },
  props: {
    userId: {
        type: String,
        default: ''
    },
    orderId:{
        type: String,
        defualt: ''
    },
      userIdentiInfo:{
        type: Array,
          defualt: []
      },
      userIdentiInfo2:{
          type: Array,
          defualt: []
      },
      userIdentiInfo3:{
          type: Array,
          defualt: []
      },
      callLog:{
        type:Array,
          defualt: []
      },
      contactInfo:{
        type:Array,
          defualt:[]
      }

  },
  methods: {
    showModal() {
      this.$emit('showBZ');
    },
    getPhoneBookCallLog() {
      this.$http.post('/helsinki/admin/risk/getPhoneBookCallLog', {
        userId: this.userId
      }).then(({ data: { errcode, info, data } }) => {
        if (errcode == 0) {
          this.phoneCallLog = data.callLog;
        } else {
          this.$Message.info(info);
        }
      }, error => {
        console.log(error);
      });
    },
    getCallLog() { //通讯记录
      var _this = this, param = {};
      param.userId = _this.userId;

      this.$http.post('/helsinki/admin/risk/getCallLog', param)
      .then(function(res) {
        if (res.data.errcode == 0) {
          _this.callLog = res.data.data.callLog || [];
        }
      }, function(res){
        _this.$Message.info(res.data.info);
      });
    }
  },
  mounted() {

  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
    @import '../static/style.css';
    @import '../static/common.scss';
    .one-color-num {
    }
    .two-color-num {
        transform: rotate(90deg);

    }
    .three-color-num {
        transform: rotate(180deg);
        transition: all 0.3s;
    }
    .four-color-num {
        transform: rotate(270deg);
        transition: all 0.3s;
    }
    .pop-table h2 {
        line-height: 32px;
        font-weight: normal;
        text-align: left;
        padding: 0 10px;
    }
    .underline {
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
    }
    .picInfo{
        margin:0 30px;
        text-align: center;
        min-height: 700px;
    }
    .picInfoLi{
        float:left;
        width:45%;
        margin-top: 10px;
        max-height:350px;
        overflow: hidden;
        margin-right:20px;
    }
    .picInfoLi img{
        max-height:300px;
        width: 400px;
        overflow: hidden;
    }
    .btn-wrapper {
        margin-top: 12px;
        text-align: right;
    }
    #paymentAllListContent {
        max-height: 330px;
        overflow: auto;
    }
    .btn-wrapper a:hover,
    .btn-wrapper a:active,
    .btn-wrapper a:visited {
        color: #ffffff;
    }
    .priview {
        margin-bottom: 10px;
        .priview-image {
            max-height: 60px;
        }
    }
    .zhuanzhuan{
        margin-bottom: 2px;position: relative
    }
</style>
